<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<title>hlsplayer</title>
<link rel="stylesheet" type="text/css" href="${ctxPath!}/plugins/layui/css/layui.css" media="all"/>
<script type="text/javascript" src="${ctxPath!}/plugins/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath!}/plugins/jquery/jquery.min.js" ></script>
<script type="text/javascript" src="${ctxPath!}/plugins/hls/hls.min.js" ></script>
</head>
<style type="text/css">
    #tool{
        position: absolute;
        top: 10px;
        right: 10px;
        /*width: 100%;*/
        /*height: 38px;*/
        z-index: 500;
        /*background: rgba(0,0,0,0.65);*/
    }
    #main{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: #000000;
    }
</style>
 <script type="text/javascript">
layui.use(['element'], function () {
  var $ = layui.jquery;
  var videoId="${videoId!}";
  var url="http://10.4.234.183:7086/live/cameraid/"+videoId+"/substream/1.m3u8";
  var returnTop="${ctxPath!}/stshipinb/player.html?videoId="+videoId;
  //初始化南区高度
  var southHeight=$(window).height()-3;
  $("#main").css("height",southHeight);
  //监听窗口
  $(window).resize(function(){
    var southHeight=$(window).height()-3;
    $("#main").css("height",southHeight);
  });

  $("#returnTop").bind("click",function (){
      window.open(returnTop,"_self");
  });

function playvideo(){
if(Hls.isSupported()) { 
var video = document.getElementById('video');
  var hls = new Hls();
  hls.loadSource(url);
  hls.attachMedia(video); 
  hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); }); 
                }
}

playvideo();

});
</script>
<body>
<div id="tool"><button id="returnTop" class="layui-btn" ><i class="layui-icon layui-icon-return"></i>返回上一级</button></div>
<div id="main"><video width="100%" height="100%" id="video" preload autoplay loop muted controls></video></div>

</body>
</html>